Speeding up Web Page Loading


Introduction#

Before a user can consume any content, many steps are involved (for example, sending a request, getting a response, rendering the page, and so on) that can add substantial latency. There is another user-perceived delay that surfaces because of the web page construction, called a web page load delay.

A web page consists of multiple web objects, such as HTML, JavaScript, CSS, images, audio, and so on. But some web objects are not required at the initial loading of the page. For example, a web page displays the notification icon but not the list of notifications. The list can be fetched from the server only when the user clicks on the notification icon. To implement such behavior, the code used for the notification list will not be loaded initially. We want to avoid loading this code because it will increase the initial page load time (PLT). This inevitably increases the risk of users losing interest in the site and moving on to another website that loads quickly. This user behavior is depicted in the following illustration, where 2 seconds is an example of the load time:

Yes
Yes
No
No
PLT < 2 sec ?
PLT < 2 sec ?
User
User
Site 2
Site 2
Site 1
Site 1
Viewer does not support full SVG 1.1
The user chooses Site 2 because its page load time is less than 2 seconds

Load time is one of the important aspects of the user experience, and losing visitors impacts revenue. For example, according to Amazon, a 100 millisecond delay in page load time results in a loss of 1% of their sales.

In this lesson, we’ll discuss the main issues that increase the loading time and how we can address them by prioritizing the components of the web page, such as which component should be loaded and when. Let's start with how a web page loads in the browser.

The web page load process (WPL)#

The web page load process (WPL) consists of multiple steps. Let's understand these steps through the following illustration:

1: Send an HTTP request to the web server
1: Send an HTTP request to the w...
Browser
Browser
Web server
Web server
2: Construct HTML file
2: Construct HTML file
3: Send the HTML file to browser
3: Send the HTML file to browser
4: Browser starts parsing
the HTML content
4: Browser starts parsing...
5: Download the embedded files
5: Download the em...
Files such as CSS and JavaScript
Files such as CSS an...
6: DOM tree
 creation
6: DOM tree...
Website
Website
7: Convert the DOM tree into a layout tree and renders the page
7: Convert the DOM tree into a layout...
Viewer does not support full SVG 1.1
Steps involved in the web page load process

Starting at step 2, the server has two options. The first option is that the server can send an empty HTML document with links to JavaScript, or the server can send a complete HTML document with the content ready to render in the browser. As discussed earlier in this chapter, this is a rendering decision that depends on the design of the application. Next, the browser parses the HTML file and downloads the embedded files. For example, the JavaScript and CSS files are downloaded as soon as the <script> and <link> tags are rendered in the HTML object by the browser.

Note: When the parser encounters the script or link tags, it halts parsing and evaluates the JavaScript or CSS code, which causes a delay in the page loading.

As a result of parsing, we get the DOM tree which the browser converts into a layout tree and renders on the screen. After completely loading the DOM tree, the load event is called by the browser. The job of the load event is to load any JavaScript code that is supposed to execute after the initial page load.

The process above works fine, but there are some subtle inefficiencies that increase the page load time. Let's take a look at them in the next section.

Inefficiencies in page load time (PLT)#

The following are the key inefficiencies that cause a delay during the PLT:

  • Unused content: In most cases, the web pages do not use three-quarters (34\frac{3}{4}) of CSS at the initial load. It increases the load time because unused CSS is also parsed at the load time.

  • Blocking JavaScript and CSS: During the HTML parsing of the document, if the parser encounters any JavaScript and CSS code, the parser starts executing it, temporarily halting the DOM construction. Eventually, the control returns to the HTML parser. In order to fulfill the dependencies in the page load process, the parsing process continues to run in sequential order. However, the blocking that happens due to JavaScript and CSS execution proves to be expensive. It’s estimated that the parsing that blocks the DOM roughly takes 15% extra PLT.

Created with Fabric.js 3.6.6
The parser starts parsing the HTML document on the client browser

1 of 6

Created with Fabric.js 3.6.6
Identify the tag for the JavaScript or CSS code in the head tag of HTML document

2 of 6

Created with Fabric.js 3.6.6
If the tag is for JavaScript, the parser stops the parsing, downloads the JavaScript code, and starts evaluating the code

3 of 6

Created with Fabric.js 3.6.6
After completing the evaluation of JS, the parser resumes its parsing

4 of 6

Created with Fabric.js 3.6.6
If CSS code is found by the parser, it again stops the parsing, downloads the CSS file and starts evaluating the code

5 of 6

Created with Fabric.js 3.6.6
After the evaluation, the CSS constructs the CSSOM, which is same as the DOM, but it’s used to manipulate the CSS code

6 of 6

  • Roundtrips: While parsing the document, if any URL is found, the parser stops the DOM construction and goes to the DNS to get the IP address for that URL, establishes the TCP connection, sends an HTTP request to the server, and obtains the response from the server. This step is repeated for each URL that the browser found in the document, so the round-trip time depends on how many URLs are present in the document.

We’ll use a few techniques to address the issues discussed above. Mainly, we’ll discuss Shandian for page load optimization. In particular, it reduces the PLT by restructuring the load process.

Minimize PLT using Shandian #

Shandian is a technique that streamlines the process of page loading. It ensures that the initial page load is improved by determining which objects on the page should be communicated first to the client and the order it should be done in. It is a system developed and described in the 2016 research paper “Speeding up Web Pages Loads with Shandian” by Wang, et al. The following illustration depicts a high-level view of the Shandian approach:

Browser
Browser
Web server
Web server
Proxy server
Proxy server
1: Send a request to the proxy server
1: Send a request to the proxy s...
3: Send a request to the proxy server
3: Send a request to the pr...
2: Forward a request to the server
2: Forward a request to the s...
5: Migrate the load state
5: Migrate the load state
6: Parse, DOM construction, and display it to the browser
6: Parse, DOM construction, and displa...
Web page
Web page
4: Preprocess a web page by dividing the web objects into states (load time and post load)
4: Preprocess a web page by dividing the web objec...
Web page
Web page
7: Migrating post load state in background
7: Migrating post load state in backgrou...
8: Post load state construction
8: Post load state c...
Viewer does not support full SVG 1.1
The steps involved in the Shandian technique to load a web page

Shandian first preprocesses the web page on the proxy server by dividing objects of this web page into two states, such as load time state and post load state. The load time state separates the objects that are required at the time of initial load. Primarily, it contains HTML elements with their stylings, which is the result of the JavaScript and CSS evaluation (except for the CSS style computations). The proxy server migrates this state into JSON format to the client browser. Due to this, Shandian uses the modified client browser, such as a JSON lexer parser, instead of the default HTML parser.

Note: In order to reduce round-trip time and quickly obtain the requested resources, a proxy server is either situated near the server, or it can be part of the service (a reverse proxy).

Point to Ponder

Question

How can the client-side browser use the Shandian approach to load a page?

Hide Answer

Using an HTTP header, the browser can choose to use Shandian and fall back to default browser mode to load web pages, even if it is not supported by Shandian.

On the other hand, the post load state separates the objects that are required after the initial load. It consists of the remaining JavaScript and inline/external links to CSS. Also, it includes unmodified data from CDNs. Post load state executes in the background during the loading phase so that users can continue interacting with the page.

The pros and cons of these states are given below:

Pros and Cons of Web Page Load States

State

Pros

Cons





Load time state

  • Avoids unused CSS and eliminates HTML for initial page load
  • Don’t need to go to the server repeatedly because all the content is already present in the load state
  • Parsing of unused CSS and JavaScript is eliminated
  • Initially, the size of the load state increases, and we need to migrate this state to the client to load the web page in the browser

Post load state

  • Compatible with the latency-reducing techniques
  • Already evaluated CSS rules are reevaluated

After that, this state also migrates to the client browser and makes the page completely interactive. Shandian is compatible with latency-reducing techniques because it keeps the original URLs for images, video, and so on in the post load state, so this data can be loaded from the CDNs.

Shandian has improved overall page load times approximately from 50% to 60%. However, this improvement in latency costs an additional computation on the proxy server to preload the page on the proxy server.

Minimize PLT using other techniques#

Apart from Shandian, here are some useful techniques employed over the years that can be helpful in improving the page load time:

  • JavaScript and CSS minification: Reducing the size of JavaScript and CSS by removing extra comments, spaces, and characters can reduce the size of these files and facilitate quick loading.

  • Image size compression: Large images drastically slow down the web page. Image compression tools reduce the size of images while maintaining good quality.

  • Reduce links: Using too many links on the page can force the browser to obtain objects from different domains. This drastically increases page load times. Keeping a check on the number of links is crucial to a lower page load time.

Q

What is the primary goal of the Shandian system?

Your Answer
A)

Reducing latency

B)

Reducing throughput

Summary#

In this lesson, we studied the novel system Shandian, which reduces user-perceived latencies by minimizing the inefficiencies in typical page construction and parsing phases.

Quiz on Important API Concepts - I

Resource Hints and Debouncing